import { test, expect } from "@playwright/test";
import { frameworks, url, initSurvey, compareScreenshot, resetFocusToBody } from "../e2e/helper";
import { upArrowImageLink } from "../visualRegressionTests/helper";

const title = "Advanced header screenshot";

frameworks.forEach(framework => {
  test.describe(`${framework} ${title}`, () => {
    test.beforeEach(async ({ page }) => {
      await page.goto(`${url}${framework}`);
    });

    test("Check survey advanced header inherit width from survey", async ({ page }) => {
      await page.setViewportSize({ width: 1200, height: 1000 });
      await initSurvey(page, framework, {
        showQuestionNumbers: true,
        autoFocusFirstQuestion: true,
        title: "Survey Title",
        description: "Survey description",
        logo: upArrowImageLink,
        "widthMode": "static",
        "width": "600",
        headerView: "advanced",
        elements: [
          {
            type: "text",
            title: "Question title",
            name: "q1"
          }
        ]
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: "500px",
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "top"
          }
        });
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-width-by-survey.png");
    });

    test("Check survey advanced header with overlap", async ({ page }) => {
      if (framework === "vue") return;
      await page.setViewportSize({ width: 1200, height: 1000 });
      await initSurvey(page, framework, {
        showQuestionNumbers: true,
        autoFocusFirstQuestion: true,
        title: "Survey Title",
        description: "Survey description",
        logo: upArrowImageLink,
        "widthMode": "static",
        "width": "600",
        headerView: "advanced",
        elements: [
          {
            type: "text",
            title: "Question title",
            name: "q1"
          }
        ]
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: "500px",
            inheritWidthFrom: "survey",
            "overlapEnabled": true,
          },
          "cssVariables": {
            "--sjs-header-backcolor": "rgba(25, 179, 148, 1)"
          }
        });
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-with-overlap.png");

      await page.setViewportSize({ width: 500, height: 600 });
      await page.evaluate(() => {
        (window as any).survey.setIsMobile(true);
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-mobile-with-overlap.png");
    });

    test("Check survey TOC + advanced header with overlap", async ({ page }) => {
      if (framework === "vue") return;
      await page.setViewportSize({ width: 1200, height: 1000 });
      await initSurvey(page, framework, {
        showQuestionNumbers: true,
        autoFocusFirstQuestion: true,
        title: "Survey Title",
        description: "Survey description",
        logo: upArrowImageLink,
        "widthMode": "static",
        "width": "600",
        headerView: "advanced",
        showTOC: true,
        elements: [
          {
            type: "text",
            title: "Question title",
            name: "q1"
          }
        ]
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: "500px",
            inheritWidthFrom: "survey",
            "overlapEnabled": true,
          },
          "cssVariables": {
            "--sjs-header-backcolor": "rgba(25, 179, 148, 1)"
          }
        });
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-toc-advanced-header-with-overlap.png");

      await page.setViewportSize({ width: 500, height: 600 });
      await page.evaluate(() => {
        (window as any).survey.setIsMobile(true);
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-toc-advanced-header-mobile-with-overlap.png");
    });

    test("Check header background color modes", async ({ page }) => {
      await page.setViewportSize({ width: 800, height: 600 });
      await initSurvey(page, framework, {
        showQuestionNumbers: true,
        autoFocusFirstQuestion: true,
        title: "Survey Title",
        description: "Survey description",
        elements: [
          {
            type: "text",
            title: "Question title",
            name: "q1"
          }
        ]
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({ "cssVariables": {}, "header": {}, "headerView": "advanced" });
      });
      await page.waitForTimeout(500);
      await resetFocusToBody(page);
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-background-none.png");

      await page.evaluate(() => {
        (window as any).survey.applyTheme({ "cssVariables": { "--sjs-header-backcolor": "var(--sjs-primary-backcolor)" }, "header": {}, "headerView": "advanced" });
      });
      await page.waitForTimeout(500);
      await resetFocusToBody(page);
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-background-accent.png");

      await page.evaluate(() => {
        (window as any).survey.applyTheme({ "cssVariables": { "--sjs-header-backcolor": "transparent" }, "header": {}, "headerView": "advanced" });
      });
      await page.waitForTimeout(500);
      await resetFocusToBody(page);
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-background-custom-none.png");

      await page.evaluate(() => {
        (window as any).survey.applyTheme({ "cssVariables": { "--sjs-font-headertitle-color": "rgba(255, 0, 0, 1)", "--sjs-font-headerdescription-color": "rgba(255, 0, 0, 1)", "--sjs-header-backcolor": "rgba(0, 255, 0, 1)" }, "header": {}, "headerView": "advanced" });
      });
      await page.waitForTimeout(500);
      await resetFocusToBody(page);
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-background-custom-set.png");
    });

    test("Check header background color modes 2", async ({ page }) => {
      await page.setViewportSize({ width: 1920, height: 1080 });
      await initSurvey(page, framework, {
        showQuestionNumbers: true,
        "description": "Building your own form management\nsystem has never been easier.",
        "logoPosition": "right",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "radiogroup",
                "name": "question1",
                "choices": [
                  "Item 1",
                  "Item 2",
                  "Item 3"
                ]
              }
            ]
          }
        ]
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "cssVariables": {
            "--sjs-header-backcolor": "transparent"
          },
          "header": {
            "inheritWidthFrom": "survey",
            "height": 256
          },
          "headerView": "advanced"
        });
      });
      await page.waitForTimeout(500);
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-text-alignment.png");
    });

    test("Check survey advanced header with height 300px", async ({ page }) => {
      await page.setViewportSize({ width: 1200, height: 1000 });
      await initSurvey(page, framework, {
        title: "Building your own form management system has never been easier.",
        description: "With SurveyJS, you can finally avoid using third-party black box SaaS platforms and create a secure and self-hosted form management system, retaining all sensitive data on your own servers.",
        logo: upArrowImageLink,
        logoHeight: "200",
        headerView: "advanced",
        "widthMode": "static",
        "width": "1000",
        "pages": [{ "name": "page1", "elements": [{ "type": "text", "name": "question1" }] }],
      });

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       |T,D|   | I |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "middle",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-1-one-row.png");

      /**
       +---+---+---+
       | I |   |   |
       +---+---+---+
       | T |   |   |
       +---+---+---+
       | D |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "left",
            "logoPositionY": "top",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "bottom"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-2-one-first-column.png");

      /**
       +---+---+---+
       |   |   | I |
       +---+---+---+
       |T,D|   |   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "top",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-3-different-rows-1.png");

      /**
       +---+---+---+
       |   |   | I |
       +---+---+---+
       |   |T,D|   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "top",
            "titlePositionX": "center",
            "titlePositionY": "middle",
            "descriptionPositionX": "center",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-4-different-rows-2.png");

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       | I |T,D|   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "left",
            "logoPositionY": "middle",
            "titlePositionX": "center",
            "titlePositionY": "middle",
            "descriptionPositionX": "center",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-5-one-row-close-columns-1.png");

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       |T,D| I |   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            height: 300,
            inheritWidthFrom: "survey",
            "logoPositionX": "center",
            "logoPositionY": "middle",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-fixed-height-6-one-row-close-columns-2.png");
    });

    test("Check survey advanced header with auto height", async ({ page }) => {
      await page.setViewportSize({ width: 1200, height: 800 });
      await initSurvey(page, framework, {
        title: "Building your own form management system has never been easier.",
        description: "With SurveyJS, you can finally avoid using third-party black box SaaS platforms and create a secure and self-hosted form management system, retaining all sensitive data on your own servers.",
        logo: upArrowImageLink,
        logoHeight: "200",
        headerView: "advanced",
        "widthMode": "static",
        "width": "1000",
        "pages": [{ "name": "page1", "elements": [{ "type": "text", "name": "question1" }] }],
      });

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       |T,D|   | I |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "middle",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-1-one-row.png");

      /**
       +---+---+---+
       | I |   |   |
       +---+---+---+
       | T |   |   |
       +---+---+---+
       | D |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "left",
            "logoPositionY": "top",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "bottom"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-2-one-first-column.png");

      /**
       +---+---+---+
       |   |   | I |
       +---+---+---+
       |T,D|   |   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "top",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-3-different-rows-1.png");

      /**
       +---+---+---+
       |   |   | I |
       +---+---+---+
       |   |T,D|   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "right",
            "logoPositionY": "top",
            "titlePositionX": "center",
            "titlePositionY": "middle",
            "descriptionPositionX": "center",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-4-different-rows-2.png");

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       | I |T,D|   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "left",
            "logoPositionY": "middle",
            "titlePositionX": "center",
            "titlePositionY": "middle",
            "descriptionPositionX": "center",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-5-one-row-close-columns-1.png");

      /**
       +---+---+---+
       |   |   |   |
       +---+---+---+
       |T,D| I |   |
       +---+---+---+
       |   |   |   |
       +---+---+---+
       */
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "center",
            "logoPositionY": "middle",
            "titlePositionX": "left",
            "titlePositionY": "middle",
            "descriptionPositionX": "left",
            "descriptionPositionY": "middle"
          }
        });
      });
      await compareScreenshot(page, ".sv-header", "survey-advanced-header-auto-height-6-one-row-close-columns-2.png");
    });

    test("Check header height is correct", async ({ page }) => {
      await page.setViewportSize({ width: 1600, height: 900 });
      await initSurvey(page, framework, {
        title: "My Survey",
        logo: "",
        headerView: "advanced",
        pages: [
          {
            name: "page1",
            elements: [
              {
                type: "text",
                name: "question1",
              },
            ],
          },
          {
            name: "page2",
            elements: [
              {
                type: "text",
                name: "question2",
              },
            ],
          },
        ],
      });
      await page.evaluate(() => {
        (window as any).survey.applyTheme({
          "header": {
            inheritWidthFrom: "survey",
            "logoPositionX": "left",
            "logoPositionY": "top",
            "titlePositionX": "left",
            "titlePositionY": "bottom",
            "descriptionPositionX": "left",
            "descriptionPositionY": "bottom"
          }
        });
      });
      await compareScreenshot(page, ".sd-root-modern", "survey-advanced-header-correct-height.png");
    });
  });
});